<template>
	<sc-page-header :title="id?'ID:'+id:'新增NFT'" description="NFT作品详情" icon="el-icon-burger"></sc-page-header>
	<el-main>
		<el-card shadow="never">
			<!-- 单品NFT -->
			<el-form :model="form" :rules="rules" ref="form" label-width="100px" v-if="type === 1">
				<el-form-item label="创建类型" prop="castingType">
					<el-radio-group v-model="form.castingType" @change="changeType">
						<el-radio-button :label="1">单个NFT</el-radio-button>
						<el-radio-button :label="2">系列NFT</el-radio-button>
						<el-radio-button :label="3">盲盒NFT</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="使用方式" prop="collectionType">
					<el-radio-group v-model="form.collectionType">
						<el-radio-button :label="1">仅展示</el-radio-button>
						<el-radio-button :label="2">仅领取</el-radio-button>
						<el-radio-button :label="3">仅购买</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="作品名称" prop="castingName">
					<el-input v-model="form.castingName" placeholder="请输入" clearable style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="作品描述" prop="remarks">
					<el-input type="textarea" :maxlength="200" show-word-limit v-model="form.remarks" placeholder="请输入"
							  style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="作品文件" prop="content">
					<sc-upload v-model="form.content" title="上传作品"></sc-upload>
					<div class="el-form-item-msg" data-v-b33b3cf8="">请上传尺寸为750×1642的图片</div>
				</el-form-item>
				<el-form-item label="详细介绍" prop="details">
					<sc-editor v-model="form.details" placeholder="请输入" :height="200"></sc-editor>
				</el-form-item>

				<el-form-item label="创造者" prop="caster">
					<el-input v-model="form.caster" placeholder="请输入" clearable style="width: 300px"></el-input>
				</el-form-item>

				<el-form-item label="价格" prop="price">
					<el-input v-model="form.price" placeholder="请输入" style="width: 300px" type="number">
						<template #append>CNY</template>
					</el-input>
				</el-form-item>

				<el-form-item label="积分" prop="fuelValue">
					<el-input v-model="form.fuelValue" placeholder="请输入" clearable style="width: 300px"
							  type="number"></el-input>
				</el-form-item>
				<el-form-item label="作品标签" prop="label">
					<el-checkbox-group v-model="form.label" @change="changeddd">
						<el-checkbox-button v-for="item in labels" :key="item.id" :label="item.id">{{
							item.name
							}}
						</el-checkbox-button>
					</el-checkbox-group>
				</el-form-item>

				<el-form-item label="限量" prop="maxNum">
					<el-input type="number" :max="100" v-model="form.maxNum" placeholder="请输入" clearable
							  style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="发行方" prop="issuer">
					<el-input v-model="form.issuer" placeholder="请输入" clearable style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item prop="releaseDate" label="发行日期：">
					<el-date-picker v-model="form.releaseDate" type="datetime" placeholder="选择日期时间" align="right"
									value-format="YYYY-MM-DD HH:mm:ss"
									style="width: 300px">
					</el-date-picker>
				</el-form-item>


				<el-form-item>
					<el-button type="primary" @click="save">保 存</el-button>
				</el-form-item>
			</el-form>
			<!-- 系列NFT -->
			<el-form :model="seriesForm" :rules="seriesFormRules" ref="seriesForm" label-width="100px"
					 v-if="type === 2">
				<el-form-item label="创建类型" prop="castingType">
					<el-radio-group v-model="seriesForm.castingType" @change="changeType" :disabled="formItemDisabled">
						<el-radio-button :label="1">单个NFT</el-radio-button>
						<el-radio-button :label="2">系列NFT</el-radio-button>
						<el-radio-button :label="3">盲盒NFT</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="系列名称" prop="castingName">
					<el-input v-model="seriesForm.castingName" placeholder="请输入" clearable
							  style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="系列描述" prop="remarks">
					<el-input type="textarea" :maxlength="200" show-word-limit v-model="seriesForm.remarks"
							  placeholder="请输入"
							  style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="系列封面" prop="content">
					<sc-upload v-model="seriesForm.content" title="上传作品"></sc-upload>
					<div class="el-form-item-msg" data-v-b33b3cf8="">请上传尺寸为750×800的图片</div>
				</el-form-item>
				<el-form-item label="背景色" prop="castingExtVO.backgroundColor">
					<el-color-picker v-model="seriesForm.castingExtVO.backgroundColor" show-alpha
									 :predefine="predefineColors"/>
				</el-form-item>
				<el-form-item label="发行方" prop="issuer">
					<el-input v-model="seriesForm.issuer" placeholder="请输入" clearable style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item prop="castingIds" label="关联作品：">
					<el-select v-model="seriesForm.castingIds" multiple placeholder="请选择" style="width: 300px">
						<el-option v-for="item in options" :key="item.id" :label="item.castingName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="releaseDate" label="发行日期：">
					<el-date-picker v-model="seriesForm.releaseDate" type="datetime" placeholder="选择日期时间" align="right"
									value-format="YYYY-MM-DD HH:mm:ss"
									style="width: 300px">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="save">保 存</el-button>
				</el-form-item>
			</el-form>
			<!-- 盲盒NFT -->
			<el-form :model="blandBoxForm" :rules="blandBoxFormRules" ref="blandBoxForm" label-width="100px"
					 v-if="type === 3">
				<el-form-item label="创建类型" prop="castingType">
					<el-radio-group v-model="blandBoxForm.castingType" @change="changeType"
									:disabled="formItemDisabled">
						<el-radio-button :label="1">单个NFT</el-radio-button>
						<el-radio-button :label="2">系列NFT</el-radio-button>
						<el-radio-button :label="3">盲盒NFT</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="盲盒名称" prop="castingName">
					<el-input v-model="blandBoxForm.castingName" placeholder="请输入" clearable
							  style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="价格" prop="price">
					<el-input v-model="blandBoxForm.price" placeholder="请输入" style="width: 300px" type="number">
						<template #append>CNY</template>
					</el-input>
				</el-form-item>
				<el-form-item label="盲盒描述" prop="remarks">
					<el-input type="textarea" :maxlength="200" show-word-limit v-model="blandBoxForm.remarks"
							  placeholder="请输入"
							  style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="盲盒封面" prop="content">
					<sc-upload v-model="blandBoxForm.content" title="上传作品"></sc-upload>
					<div class="el-form-item-msg" data-v-b33b3cf8="">请上传尺寸为750×800的图片</div>
				</el-form-item>
				<el-form-item label="背景色" prop="castingExtVO.backgroundColor">
					<el-color-picker v-model="blandBoxForm.castingExtVO.backgroundColor" show-alpha
									 :predefine="predefineColors"/>
				</el-form-item>
				<el-form-item label="发行方" prop="issuer">
					<el-input v-model="blandBoxForm.issuer" placeholder="请输入" clearable style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item prop="castingExtVO.weightInfoList" label="关联作品：">
					<sc-form-table v-model="blandBoxForm.castingExtVO.weightInfoList" :addTemplate="addTemplate"
								   placeholder="暂无数据">
						<el-table-column prop="castingId" label="作品" width="180">
							<template #default="scope">
								<el-select v-model="scope.row.castingId" placeholder="请选择">
									<el-option v-for="item in options" :key="item.id" :label="item.castingName"
											   :value="item.id">
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="weight" label="概率(%)" width="180">
							<template #default="scope">
								<el-input v-model="scope.row.weight" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
					</sc-form-table>
				</el-form-item>
				<el-form-item prop="releaseDate" label="发行日期：">
					<el-date-picker v-model="blandBoxForm.releaseDate" type="datetime" placeholder="选择日期时间"
									align="right"
									value-format="YYYY-MM-DD HH:mm:ss"
									style="width: 300px">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="save">保 存</el-button>
				</el-form-item>
			</el-form>
		</el-card>

	</el-main>
</template>

<script>
	import {defineAsyncComponent} from "vue";
	import * as regular from "@/utils/regular";
	import {Uploader} from 'vant';

	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
	export default {
		name: 'nft-save',
		components: {
			scEditor,
			Uploader
		},
		data() {
			const checkPrice = (rule, value, callback) => {
				if (!value && value !== 0) {
					return callback(new Error("价格不能为空"));
				} else if (!regular.money.test(value)) {
					callback(new Error("请输入正整数或者两位小数"));
				} else if (parseFloat(value) > 99999999) {
					callback(new Error("结算金额设置超过上限值"));
				} else {
					callback();
				}
			};
			return {
				id: this.$route.query.id,
				mode: this.$route.query.mode,
				type: parseInt(this.$route.query.type) || 1, // 1:单品 2:系列 3:盲盒
				labels: [
					{id: 1, name: '数字艺术'},
					{id: 2, name: '个人作品'},
					{id: 3, name: '摄影作品'},
				],
				// 单品表单
				form: {
					name: "",
					castingType: 1,
					monetaryUnit: 1,
					price: 0,
					releaseStatus: 1,
					label: 1,
					collectionType: 2, // 使用方式
				},
				// 系列表单
				seriesForm: {
					castingType: 2,
					castingName: '',
					remarks: '',
					releaseDate: '',
					castingIds: '',
					content: '',
					castingExtVO: {
						backgroundColor: '#ff0000', // 默认背景色值
					}
				},
				// 盲盒表单
				blandBoxForm: {
					castingType: 3,
					castingName: '',
					price: null,
					remarks: '',
					releaseDate: '',
					castingIds: '',
					content: '',
					castingExtVO: {
						backgroundColor: '#ff0000', // 默认背景色值
						weightInfoList: [], // 盲盒权重
					}

				},
				rules: {
					castingType: [{
						required: true,
						trigger: 'change',
						message: '请选择创建类型'
					}],
					castingName: [{
						required: true,
						trigger: 'blur',
						message: '请输入作品名称'
					}, {
						max: 20,
						message: '长度在20个字符以内',
						trigger: 'blur'
					}],
					caster: [{
						required: true,
						trigger: 'blur',
						message: '请输入创造者'
					}],
					remarks: [{
						required: true,
						trigger: 'blur',
						message: '请上传描述'
					}],
					content: [{
						required: true,
						trigger: 'blur',
						message: '请上传作品内容'
					}],
					price: [
						{
							required: true,
							trigger: 'blur',
							message: '请输入藏品价格'
						}, {
							validator: checkPrice
						}
					],
					maxNum: [{
						required: true,
						trigger: 'blur',
						message: '请输入数量'
					}],
					issuer: [{
						required: true,
						trigger: 'blur',
						message: '请输入发行方'
					}]
				},
				seriesFormRules: {
					castingType: [{
						required: true,
						trigger: 'change',
						message: '请选择创建类型'
					}],
					castingName: [{
						required: true,
						trigger: 'blur',
						message: '请输入系列名称'
					}, {
						max: 20,
						message: '长度在20个字符以内',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						trigger: 'blur',
						message: '请上传作品内容'
					}],
					issuer: [{
						required: true,
						trigger: 'blur',
						message: '请输入发行方'
					}]
				},
				blandBoxFormRules: {
					castingType: [{
						required: true,
						trigger: 'change',
						message: '请选择创建类型'
					}],
					castingName: [{
						required: true,
						trigger: 'blur',
						message: '请输入盲盒名称'
					}, {
						max: 20,
						message: '长度在20个字符以内',
						trigger: 'blur'
					}],
					price: [
						{
							required: true,
							trigger: 'blur',
							message: '请输入盲盒价格'
						}, {
							validator: checkPrice
						}
					],
					content: [{
						required: true,
						trigger: 'blur',
						message: '请上传作品内容'
					}],
					issuer: [{
						required: true,
						trigger: 'blur',
						message: '请输入发行方'
					}]
				},
				predefineColors: [
					'#ff4500',
					'#ff8c00',
					'#ffd700',
					'#90ee90',
					'#00ced1',
					'#1e90ff',
					'#c71585',
					'rgba(255, 69, 0, 0.68)',
					'rgb(255, 120, 0)',
					'hsv(51, 100, 98)',
					'hsva(120, 40, 94, 0.5)',
					'hsl(181, 100%, 37%)',
					'hsla(209, 100%, 56%, 0.73)',
					'#c7158577',
				], // 背景色选项
				options: [], // 单品选项
				addTemplate: {
					castingId: '',
					weight: ''
				},
				formItemDisabled: false
			}
		},
		watch: {},
		mounted() {
			if (this.id) {
				//更改tag标签
				this.$store.commit("updateViewTagsTitle", `详情ID:${this.id}`)
				if (this.mode === 'edit') {
					this.formItemDisabled = true;
					this.detailById()
				}
			}
			this.querySingle()
		},
		methods: {
			/**
			 * 保存表单
			 * @returns {Promise<void>}
			 */
			async save() {
				let res = null;
				let validate = false;
				switch (this.type) {
					case 1:
						validate = await this.$refs.form.validate().catch(() => {
						});
						if (!validate) {
							return false
						}
						res = await this.$API.publish.nft.cast.post(this.form);
						break;
					case 2:
						res = await this.$API.publish.nft.cast.post(this.seriesForm);
						break;
					case 3:
						validate = await this.$refs.blandBoxForm.validate().catch(() => {
						});
						if (!validate) {
							return false
						}
						res = await this.$API.publish.nft.cast.post(this.blandBoxForm);
						break;
					default:
						res = await this.$API.publish.nft.cast.post(this.form);
						break;
				}
				if (res.success) {
					this.$message.success(`保存成功`)
					this.closeSelectedTag()
					this.$refs.form.resetFields()
				}
			},
			/**
			 * 查询详情
			 * @returns {Promise<void>}
			 */
			async detailById() {
				let res = await this.$API.publish.nft.getSeriesDetailById.post({castingId: this.id});
				const castingType = res.data.castingType;
				switch (castingType) {
					case 1:
						this.form = res.data;
						break;
					case 2:
						this.seriesForm = res.data;
						Object.assign(this.options, res.data.castingIds);
						this.seriesForm.castingIds = res.data.castingIds.map(item => {
							return item.id
						});
						break;
					case 3:
						this.blandBoxForm = res.data;
						Object.assign(this.options, res.data.castingIds);
						this.blandBoxForm.castingIds = res.data.castingIds.map(item => {
							return item.id
						});
						console.log(this.blandBoxForm);
						break;
					default:
						break;
				}
			},
			changeType(type) {
				this.type = type;
				switch (type) {
					case 1:
						this.form.castingType = 1;
						break;
					case 2:
						this.seriesForm.castingType = 2;
						break;
					case 3:
						this.blandBoxForm.castingType = 3;
						break;
					default:
						break;
				}
			},
			/**
			 * 查询未绑定的NFT
			 * @returns {Promise<void>}
			 */
			async querySingle() {
				let res = await this.$API.publish.nft.queryUnboundSingle.post({
					page: 1,
					pageSize: 999999
				})
				this.options = res.data
			},
			//关闭tag
			closeSelectedTag() {
				let tags = this.$store.state.viewTags.viewTags
				const tag = tags[tags.length - 1]
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)
				const latestView = tags.slice(-1)[0]
				if (latestView) {
					this.$router.push(latestView)
				} else {
					this.$router.push('/')
				}
			},
		}
	}
</script>

<style scoped lang="scss">

	.sc-upload-uploader {
		border: 1px dashed #F56C6C;
	}

	.sc-upload-uploader {
		border: 1px dashed #d9d9d9;
		box-sizing: border-box;
		width: 150px;
		height: 150px;
	}

	.sc-upload-uploader:hover {
		border: 1px dashed #409eff;
	}

	.sc-upload-uploader .uploader {
		width: 100%;
		height: 100%;
	}

	.sc-upload-uploader:deep(.el-upload) {
		width: 100%;
		height: 100%;
	}

	.sc-upload-uploader .file-empty {
		width: 150px;
		height: 150px;
		line-height: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.sc-upload-uploader .file-empty i {
		font-size: 28px;
		color: #8c939d;
	}

	.sc-upload-uploader .file-empty h4 {
		font-size: 12px;
		font-weight: normal;
		color: #8c939d;
		margin-top: 10px;
	}
</style>
